<template>
  <base-dialog
    title="字典项"
    ref="baseDialog"
    width="50%"
    @handleClose="handleClose"
    :btnShow="false"
  >
    <el-form :inline="true" :model="form">
      <el-form-item label="字典标签">
        <el-input v-model="form.dicLabel" placeholder="字典标签" />
      </el-form-item>
      <el-form-item style="float: right">
        <el-button
          class="search"
          type="success"
          v-if="$formatFR(dic_data.add)"
          @click="handleOpenDialog()"
        >
          新增
        </el-button>
        <el-button class="search" type="primary" @click="handleSearch">搜索</el-button>
        <el-button class="reset" type="warning" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格部分 -->
    <el-table :data="tableData" size="small" style="width: 100%" border>
      <el-table-column prop label="序号" type="index" width="50" align="center" />
      <el-table-column prop="dicCode" label="字典编码" align="center" />
      <el-table-column prop="dicLabel" label="字典标签" align="center" />
      <el-table-column prop="dicValue" label="字典值" align="center" />
      <el-table-column prop="orderNo" label="排序" align="center" width="70" />
      <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip />
      <el-table-column prop label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-link
            type="warning"
            v-if="$formatFR(dic_data.edit)"
            size="mini"
            plain
            @click="handleOpenDialog(scope.row)"
          >
            编辑
          </el-link>
          <el-link
            type="danger"
            v-if="$formatFR(dic_data.del)"
            :style="{ marginLeft: '0.0521rem' }"
            size="mini"
            plain
            @click="handleDel(scope.row.id)"
          >
            删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>

    <base-pagination
      :size="form.size"
      :current="form.current"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></base-pagination>
    <addDialog ref="addDialog" :style="{ display: 'none' }" @updatePage="reset" />
  </base-dialog>
</template>

<script>
import { dicData, delData } from "@/api/system/dic"
import addDialog from "./addDialog.vue"
import FUNCROLELIST from "@/utils/func_role/system"

export default {
  name: "viewDialog",
  components: {
    addDialog
  },
  data() {
    return {
      dic_data: FUNCROLELIST.dic_data,
      form: {
        dicLabel: "",
        current: 1,
        size: 10
      },
      tableData: [],
      total: 0,
      dicCode: ""
    }
  },
  methods: {
    init(row) {
      this.dicCode = row.dicCode
      this.getList()
      this.$refs.baseDialog.dialogVisible = true
    },
    reset() {
      this.form = {
        dicLabel: "",
        size: 10,
        current: 1
      }
      this.getList()
    },
    handleCurrentChange(val) {
      this.form.current = val
      this.getList()
    },
    handleSizeChange(val) {
      this.form.size = val
      this.getList()
    },
    // 搜索
    handleSearch() {
      this.form.current = 1
      this.getList()
    },
    handleOpenDialog(row) {
      this.$refs.addDialog.init(this.dicCode, row)
    },
    handleClose() {
      this.$refs.baseDialog.dialogVisible = false
      this.tableData = []
      this.form = {
        dicLabel: "",
        current: 1,
        size: 10
      }
    },
    // 删除
    handleDel(id) {
      this.$confirm("确认删除该字典项吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delData(id).then(() => {
          this.getList()
          this.$message({
            type: "success",
            message: "删除成功!"
          })
        })
      })
    },
    getList() {
      const data = {
        dicCode: this.dicCode,
        ...this.form
      }
      dicData(data).then((res) => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.inputValue {
  width: 100%;
}

.el-form {
  overflow: hidden;
  margin-bottom: 30px;
}
</style>
